const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: "bundle.js",
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      /*
      babel: 安装babel @babel/core babel-loader @babel/preset-env
      预设@babel/preset-env: 只转换基本语法，不能兼容处理Promise
      @babel/polyfill: 完全兼容写法, 在js中import即可. js体积过大
      按需加载的解决方法: core-js
       */
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              // 预设, 以怎样的规则处理兼容性
              presets: [
                ["@babel/preset-env",
                  {
                    // 按需加载
                    useBuiltIns: 'usage',
                    corejs: {
                      version: 3
                    },
                    // 指定浏览器版本兼容
                    targets: {
                      chrome: '45',
                      firefox: '28',
                      ie: '9'
                    }
                  }]
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',
        minify: true, // 压缩html
      }
    )
  ],
  // production  自动压缩js
  mode: "production"
}